import { Component } from "react";

interface Props {
  columns: {
    label: string;
    key: string;
  }[];
  data: {
    [key: string]: string | number;
  }[];
}

export default class Table extends Component<Props> {
  render() {
    const { columns, data } = this.props;

    return (
      <table>
        <thead>
          <tr>
            {columns.map((item, index) => (
              <th key={index}>{item.label}</th>
            ))}
          </tr>
        </thead>

        <tbody>
          {data.map((row, rowIndex) => (
            <tr key={rowIndex}>
              {columns.map((col, colIndex) => (
                <td key={colIndex}>{row[col.key]}</td>
              ))}
            </tr>
          ))}
        </tbody>
      </table>
    );
  }
}
